// 根据提供的数据，进行渲染评论

<template>
  <div class="MessageArea-content">
    <h3>{{ title }} {{ subtitle }}</h3>
    <ul class="list">
      <li v-for="item in list" :key="item.id">
        <Author :src="item.avatar" :size="44" />
        <div class="data">
          <div class="nickname">
            {{ item.nickname }}
          </div>
          <div class="content">
            {{ item.content }}
          </div>
          <div class="time">
            {{ setStringDate(item.createDate, true) }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Author from "@/components/Author";
import setStringDate from "@/utils/setStringDate.js";
export default {
  props: ["list", "title", "subtitle", "isLoading"],
  components: {
    Author,
  },
  methods: {
    setStringDate,
  },
};
</script>

<style scoped lang="less">
@import url("~@/style/var.less");
h3 {
  margin: 0;
  padding: 0;
  margin-top: 30px;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100px;
}
li {
  display: flex;
  border-bottom: 1px solid lighten(@gray, 20%);
  padding: 15px 0;
}
.Author-content {
  margin-right: 15px;
}
.nickname {
  color: darken(@success, 10%);
  margin-bottom: 10px;
}
.content {
  font-size: 14px;
}
.data {
  flex: 1 1 auto;
  position: relative;
}
.time {
  position: absolute;
  right: 0;
  top: 5px;
  font-size: 12px;
  color: @gray;
}
</style>